<template>
  <div class="nav-bar">
    <el-image src="/src/assets/header.jpeg"></el-image>
    <el-dropdown trigger="hover" @command="clickItem">
      <span class="el-dropdown-link" style="cursor: pointer;">
        <span style="font-weight: bold; color: #FFFFFF; padding: 0 20px;">{{ userName }}</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="changePsw">修改密码</el-dropdown-item>
          <el-dropdown-item command="exit">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
  
  import {
    inject,
    computed
  } from 'vue';
  
  const $store = inject('$store');
  const $router = inject('$router');
  
  const userName = computed(function () {
    return $store.getters.user.nickName || '运营中心'
  })
  
  const clickItem = command => {
    clickItemAction[command]();
  }
  
  const clickItemAction = {
    changePsw: () => {
      $router.push('/update-pwd');
    },
    exit: () => {
      $store.commit('setUser', null);
      location.href = '/';
    }
  }
  
  
</script>

<style lang="scss" scoped>
  .nav-bar {
    padding: 0 10px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
